<!--
@description: 表单项组件测试
@author: ldb
@time: 2022-11-17 22:39:02
-->
<template>
  <BaseFormItem v-for="(item, index) in params" :key="index" v-bind="item" @extraUpdate="extraUpdate" />
</template>

<script lang="ts" setup>
import { defineAsyncComponent, reactive } from 'vue'
import { BaseType, FormItemProps, FormItemTypeEnum, TransferOptions } from '@/components/base/form-item/props'
import { menu } from '@/entity/system/menu'

const BaseFormItem = defineAsyncComponent(() => import('@/components/base/form-item/BaseFormItem.vue'))
const params = reactive<Array<FormItemProps<menu>>>([
  {
    name: 'name',
    type: FormItemTypeEnum.AUTO_COMPLETE,
    placeholder: '自动完成',
    params: {
      options: [{ value: 'sdfdf' }],
      disabled: false,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.CASCADER,
    placeholder: '级联',
    params: {
      options: [
        {
          disabled: true,
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
      mode: 'multiple',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.CHECKBOX,
    placeholder: '多选',
    params: {
      checkboxGroup: {
        options: ['Apple', 'Pear', 'Orange'],
      },
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.DATE_PICKER,
    placeholder: '日期选择',
    params: {
      picker: 'week',
      valueFormat: 'YYYY-MM-DD',
      format: 'YYYY-MM-DD',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.RANGE_PICKER,
    placeholder: ['开始时间', '结束时间'],
    params: {
      valueFormat: 'YYYY',
      format: 'YYYY',
      picker: 'year',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.INPUT,
    placeholder: '输入框',
    params: {
      type: 'textarea',
      rows: 1,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.INPUT_NUMBER,
    placeholder: '数字输入框',
    params: {
      type: 'textarea',
      rows: 1,
      size: 'large',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.MENTIONS,
    placeholder: '提及',
    params: {
      options: [
        {
          label: '刘定邦',
          value: '111',
        },
        {
          label: '刘石衡',
          value: '111',
        },
      ],
      prefix: ['@'],
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.RADIO,
    placeholder: '单选框',
    disabled: true,
    params: {
      options: [
        {
          label: '刘定邦',
          value: '111',
        },
        {
          label: '刘石衡',
          value: '222',
        },
      ],
      size: 'small',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.RATE,
    placeholder: '评分',
    params: {
      allowHalf: true,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.SELECT,
    placeholder: '选择器',
    params: {
      labelInValue: true,
      size: 'large',
      options: [
        {
          value: 'jack',
          label: 'Jack',
        },
        {
          value: 'lucy',
          label: 'Lucy',
        },
        {
          value: 'disabled',
          label: 'Disabled',
          disabled: true,
        },
        {
          value: 'yiminghe',
          label: 'Yiminghe',
        },
      ],
      mode: 'multiple',
      showSearch: true,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.SLIDER,
    placeholder: 'Slider 滑动输入条',
    params: {
      range: true,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.SWITCH,
    placeholder: '开关',
    value: 1,
    params: {
      checkedValue: 1,
      unCheckedValue: 0,
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.TIME_PICKER,
    placeholder: '时间选择框',
    params: {
      allowClear: true,
      format: 'HH:mm:ss',
      valueFormat: 'HH:mm:ss',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.TIME_RANGE_PICKER,
    placeholder: ['开始时间', '结束时间'],
    params: {
      allowClear: true,
      format: 'HH:mm:ss',
      valueFormat: 'HH:mm:ss',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.TRANSFER,
    placeholder: '穿梭框',
    params: {
      titles: ['人员列表', '已选人员列表'],
      showSearch: true,
      pagination: true,
      render: (item: TransferOptions) => item.title,
      dataSource: [
        {
          key: '1',
          title: '刘定邦',
        },
        {
          key: '2',
          title: '刘石衡',
        },
        {
          key: '3',
          title: '朱刚民',
        },
      ],
      targetKeys: [],
      selectedKeys: [],
    },
  },
  {
    name: 'name',
    type: 'tree-select',
    placeholder: '树选择',
    params: {
      showSearch: true,
      mode: 'multiple',
      treeDefaultExpandAll: true,
      treeData: [
        {
          name: 'parent 1',
          value: 'parent 1',
          children: [
            {
              name: 'parent 1-0',
              value: 'parent 1-0',
              children: [
                {
                  name: 'my leaf',
                  value: 'leaf1',
                },
                {
                  name: 'your leaf',
                  value: 'leaf2',
                },
              ],
            },
            {
              name: 'parent 1-1',
              value: 'parent 1-1',
            },
          ],
        },
      ],
      allowClear: true,
      labelInValue: true,
      fieldNames: { children: 'children', label: 'name', value: 'value' },
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.UPLOAD,
    placeholder: '文件上传',
    params: {
      maxCount: 1,
      accept: 'image/*',
    },
  },
  {
    name: 'name',
    type: FormItemTypeEnum.EDITOR,
    placeholder: '富文本',
  },
])

function extraUpdate(key: string, value: BaseType, extraValue: BaseType) {
  console.log(key)
  console.log(value)
  console.log(extraValue)
}
</script>

<style scoped lang="scss"></style>
